<template>
  <div class="user-agree">
    <div class="agree-tab user-operate-tab">
      <div
        :class="{ active: currentKey === 'article' }"
        @click="currentKey = 'article'"
      >
        文章
      </div>
      <div
        :class="{ active: currentKey === 'sharecircle' }"
        @click="currentKey = 'sharecircle'"
      >
        友圈
      </div>
    </div>
    <!-- 文章点赞 -->
    <ArticleCategory
      v-show="currentKey === 'article'"
      :loading="loading"
      :article-list="articleList"
    />

    <!-- 友圈点赞 -->
    <ShareCircleCategory
      v-show="currentKey === 'sharecircle'"
      :circle-list="circleList"
      :loading="loading"
    />
  </div>
</template>

<script>
import ArticleCategory from '../components/ArticleCategory'
import ShareCircleCategory from '../components/ShareCircleCategory'
export default {
  name: 'UserAgreeArticle',
  components: { ArticleCategory, ShareCircleCategory },
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      articleList: [],
      circleList: [],
      loading: false,
      currentKey: 'article'
    }
  },

  created () {
    this.findAgreeArticles()
    this.findAgreeCircles()
  },

  methods: {
    /**
     * 查询该用户下已点赞的所有文章
     */
    async findAgreeArticles () {
      this.loading = true
      try {
        const { data } = await this.$axios.get(
          `/gimishare/api/v1/articles/agreed?userId=${this.userId}`
        )
        this.articleList = data
      } catch (error) {
      } finally {
        this.loading = false
      }
    },

    /**
     * 查询该用户下已点赞的友圈列表
     */
    async findAgreeCircles () {
      try {
        const { data } = await this.$axios.get(
          `/gimishare/api/v1/shares/agreecircles?userId=${this.userId}`
        )
        this.circleList = data.map((o) => {
          const limitContent = o.content?.substring(0, 118).split('\r\n').slice(0, 4).join('\r\n')
          return {
            ...o,
            limitContent: limitContent + ' ...',
            hasLimit: limitContent !== o.content,
            toggle: true
          }
        })
      } catch (error) {}
    }
  }
}
</script>

<style scoped lang="less">
.user-agree {
  padding-bottom: 30px;
}
</style>
